<template>
  <div>
    <locatHeader :cities="cities"/>
    <locatBody :ALLhotCities="ALLhotCities.hotCities" :letter="letter" :cities="cities" :val="val" @bian="xioashi"/>
    <locatAZ :cities="cities" @check="handLetter" />
  </div>
</template>

<script>
import axios from "axios";
import locatHeader from "../locationHeader/locatHeader";
import locatBody from "../locationHeader/locatBody";
import locatAZ from "../locationHeader/locatAZ";
export default {
  components: {
    locatHeader,
    locatBody,
    locatAZ,
  },
  data() {
    return {
      ALLhotCities: [],
      letter: [],
      cities: {},
      val: "",
    };
  },
  mounted() {
    axios
      .get("./static/city.json")
      .then((res) => {
        console.log(res.data.data);
        //  console.log(res.data.data.hotCities)
        this.ALLhotCities = res.data.data;
        this.letter = res.data.data.letter;
        this.cities = res.data.data.cities;
        console.log(res.data.data.letter);
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    handLetter(val) {
      console.log(val);
      this.val = val;
    },
    xioashi(val){
      console.log(val);
    }
  },
};
</script>

<style lang="stylus" scoped></style>